import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./Supermarketlist.module.less";
import Breadcrumb from "@/components/public/Breadcrumb/Breadcrumb";
import { useRouter } from "vue-router";
import LIcon from "@/components/public/lIcon/lIcon";
import _ from "lodash";
export default defineComponent({
  name: 'Supermarketlist',
  setup() {
    const router = useRouter();
    const breadcrumbState = ref([
      () => <span class={styles['Breadcrumb-Home']} onClick={() => { router.push('/home') }}>首页</span>,
      () => <span class={styles['Breadcrumb-Supermarketlist']}>保险超市</span>,
    ])

    const filterState_default: any = {
      isSpecial: '0',
      industryType: '',
      productType: [] as string[],
      startType: '',
      isInternet: '',
      insuranceCompany: '',
    }

    const filterState = reactive(_.cloneDeep(filterState_default) as any)

    const initFilter = () => {
      Object.keys(filterState).forEach(item => {
        filterState[item] = _.cloneDeep(filterState_default)[item];
      })
    }

    // 客户群体
    const industryTypes = ref([
      '旅行社',
      '景区',
      '民宿客栈',
      '旅游交通',
      '学校/研学机构',
      '文旅从业者',
      '文旅消费者',
      '演出剧场',
    ])
    // 投保区域
    const isSpecialCols = ref([
      {
        label: '全国',
        value: '0',
      },
      {
        label: '当地',
        value: '1',
      }
    ])
    // 产品分类
    const productTypes = ref([
      {
        label: '旅游团体意外险',
        value: '1',
      },
      {
        label: '个人意健险',
        value: '2',
      },
      {
        label: '医疗保险',
        value: '3',
      },
      {
        label: '疾病保险',
        value: '4',
      },
      {
        label: '旅责险',
        value: '5',
      },
      {
        label: '财产损失保险',
        value: '6',
      },
      {
        label: '责任保险',
        value: '7',
      },
      {
        label: '信用保险',
        value: '8',
      },
    ])
    // 最早起保
    const startTypes = ref([
      {
        label: '当日',
        value: '0',
      },
      {
        label: '非当日',
        value: '1',
      },
    ])
    // 产品类型
    const isInternets = ref([
      {
        label: '互联网产品',
        value: '1',
      },
      {
        label: '非互联网产品',
        value: '0',
      },
    ])
    // 承保公司
    const insuranceCompanys = ref([
      {
        label: '平安',
        value: '1',
      },
      {
        label: '太保',
        value: '2',
      },
      {
        label: '大地',
        value: '3',
      },
      {
        label: '阳光',
        value: '4',
      },
      {
        label: '安盛',
        value: '5',
      },
      {
        label: '人寿',
        value: '6',
      },
      {
        label: '美亚',
        value: '7',
      },
      {
        label: '众安',
        value: '8',
      },
      {
        label: '人保',
        value: '9',
      },
      {
        label: '长安',
        value: '10',
      },
      {
        label: '华安',
        value: '11',
      },
      {
        label: '华泰',
        value: '12',
      },
      {
        label: '中华联合',
        value: '13',
      },
      {
        label: '永安',
        value: '14',
      },
      {
        label: '吉祥人寿',
        value: '15',
      },
      {
        label: '珠峰',
        value: '16',
      },
    ])
    // 筛选条件集合
    const FilterGroup = () => (
      <div class={styles['filter-group']}>
        {
          filterState.isSpecial === '0' ? (
            <div class={styles['filter-item']}>
              <span>全国</span>
            </div>
          ) : (
            <div class={styles['filter-item']}>
              <span>当地</span>
              <LIcon type="icon-delete-x" class={styles.icon} onClick={() => { filterState.isSpecial = '0' }} />
            </div>
          )
        }
        {
          filterState.industryType && (
            <div class={styles['filter-item']}>
              <span>{filterState.industryType}</span>
              <LIcon type="icon-delete-x" class={styles.icon} onClick={() => { filterState.industryType = '' }} />
            </div>
          )
        }
        {
          filterState.startType && (
            <div class={styles['filter-item']}>
              <span>{startTypes.value?.find?.((x: any) => x.value === filterState.startType)?.label || ''}</span>
              <LIcon type="icon-delete-x" class={styles.icon} onClick={() => { filterState.startType = '' }} />
            </div>
          )
        }
        {
          filterState.isInternet && (
            <div class={styles['filter-item']}>
              <span>{isInternets.value?.find?.((x: any) => x.value === filterState.isInternet)?.label || ''}</span>
              <LIcon type="icon-delete-x" class={styles.icon} onClick={() => { filterState.isInternet = '' }} />
            </div>
          )
        }
        {
          filterState.productType.map((item: any) => (
            <div class={styles['filter-item']}>
              <span>{productTypes.value?.find?.(x => x.value === item)?.label || ""}</span>
              <LIcon type="icon-delete-x" class={styles.icon} onClick={() => { filterState.productType.splice(filterState.productType.findIndex((x: any) => x === item), 1) }} />
            </div>
          ))
        }
        {
          filterState.insuranceCompany && (
            <div class={styles['filter-item']}>
              <span>{insuranceCompanys.value?.find?.((x: any) => x.value === filterState.insuranceCompany)?.label || ''}</span>
              <LIcon type="icon-delete-x" class={styles.icon} onClick={() => { filterState.insuranceCompany = '' }} />
            </div>
          )
        }
      </div>
    )

    // 筛选条件
    const Filter = () => (
      <div class={styles.filter}>
        <div class={styles['filter-criteria']}>
          <div class={styles['criteria-left']}>
            <span class={styles['criteria-title']}>筛选条件</span>
            <FilterGroup />
          </div>
          <div class={styles['criteria-right']} onClick={() => { initFilter() }}>
            <LIcon type="icon-delete" class={styles.icon} />
            <span>清空条件</span>
          </div>
        </div>
        <div class={styles['filter-container']}>
          <div class={styles['filter-row']}>
            <div class={styles['filter-label']}>客户群体</div>
            <div class={styles['filter-cols']}>
              {
                industryTypes.value.map((item: any) => (
                  <div class={[styles['filter-col'], item === filterState.industryType && styles.checked]} onClick={() => { filterState.industryType = filterState.industryType === item ? "" : item }}>{item}</div>
                ))
              }
            </div>
          </div>
          <div class={styles['filter-row']}>
            <div class={styles['filter-label']}>投保区域</div>
            <div class={styles['filter-cols']}>
              {
                isSpecialCols.value.map((item: any) => (
                  <div class={[styles['filter-col'], item.value === filterState.isSpecial && styles.checked]} onClick={() => { filterState.isSpecial = item.value }}>{item.label}</div>
                ))
              }
            </div>
          </div>
          <div class={styles['filter-row']}>
            <div class={styles['filter-label']}>产品分类</div>
            <div class={styles['filter-cols']}>
              {
                productTypes.value.map((item: any) => (
                  <div class={[styles['filter-col'], filterState.productType.includes(item.value) && styles.checked]} onClick={() => {
                    if (filterState.productType.includes(item.value)) {
                      filterState.productType.splice(filterState.productType.findIndex((x: any) => x === item.value), 1);
                    } else {
                      filterState.productType.push(item.value);
                    }
                  }}>{item.label}</div>
                ))
              }
            </div>
          </div>
          <div class={styles['filter-row']}>
            <div class={styles['filter-label']}>最早起保</div>
            <div class={styles['filter-cols']}>
              {
                startTypes.value.map((item: any) => (
                  <div class={[styles['filter-col'], filterState.startType === item.value && styles.checked]} onClick={() => {
                    filterState.startType = filterState.startType === item.value ? "" : item.value
                  }}>{item.label}</div>
                ))
              }
            </div>
          </div>
          <div class={styles['filter-row']}>
            <div class={styles['filter-label']}>产品类型</div>
            <div class={styles['filter-cols']}>
              {
                isInternets.value.map((item: any) => (
                  <div class={[styles['filter-col'], filterState.isInternet === item.value && styles.checked]} onClick={() => {
                    filterState.isInternet = filterState.isInternet === item.value ? "" : item.value
                  }}>{item.label}</div>
                ))
              }
            </div>
          </div>
          <div class={styles['filter-row']}>
            <div class={styles['filter-label']}>承保公司</div>
            <div class={styles['filter-cols']}>
              {
                insuranceCompanys.value.map((item: any) => (
                  <div class={[styles['filter-col'], filterState.insuranceCompany === item.value && styles.checked]} onClick={() => {
                    filterState.insuranceCompany = filterState.insuranceCompany === item.value ? "" : item.value
                  }}>{item.label}</div>
                ))
              }
            </div>
          </div>
        </div>
      </div>
    )

    const productListState = reactive({
      sortField: 'lbw_index',
      sortType: 'asc',
      total: 24,
      page: 1,
      list: [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
      ]
    })

    // 跳转详情
    const toDetail = (item: any) => {
      router.push('/PersInsureDetail');
    }

    // 产品列表
    const ProductList = () => (
      <div class={styles['product-list']}>
        <div class={styles['product-toolbar']}>
          <div class={styles['toolbar-left']}>
            筛选结果：共 <span class={styles['high-weight']}>{productListState.total}</span> 款产品
          </div>
          <div class={styles['toolbar-right']}>
            <div class={styles['toolbar-nav']} onClick={() => { productListState.sortField = 'lbw_index' }}>
              <span class={productListState.sortField === 'lbw_index' && styles.checked}>智能推荐</span>
            </div>
            <div class={styles['toolbar-nav']} onClick={() => { productListState.sortField = 'sales_num' }}>
              <span class={productListState.sortField === 'sales_num' && styles.checked}>热门排序</span>
            </div>
            <div class={styles['toolbar-nav']} onClick={() => { productListState.sortField = 'project_price'; productListState.sortType = productListState.sortType === 'asc' ? 'desc' : 'asc' }}>
              <span class={productListState.sortField === 'project_price' && styles.checked}>价格排序</span>
              <div class={styles['toolbar-sort']}>
                <div class={[styles['toolbar-asc'], productListState.sortType === 'asc' && styles.checked]}></div>
                <div class={[styles['toolbar-desc'], productListState.sortType === 'desc' && styles.checked]}></div>
              </div>
            </div>
          </div>
        </div>
        <div class={styles['product-container']}>
          {
            productListState.list.map((item: any) => (
              <div class={styles['product-item']}>
                <div class={styles['product-img']}>
                  <img src="http://www.chinatourins.com/_gw//res-svc/res/v3/download?fileId=3665006850536115450&free=1" />
                  <div class={styles['foot-note']}>中国大地财产保险股份有限公司</div>
                </div>
                <div class={styles['product-proName']}>
                  <div class={styles['proName']}>
                    <div class={styles.name} onClick={() => { toDetail(item) }}>中联金安企惠保（互联网专属）</div>
                    <div class={styles.isInternet}></div>
                    <div class={styles.isOnline}></div>
                  </div>
                  <div class={styles.introduce}>该款保险产品旨在保障游客和景区工作人员权益，转嫁景区责任风险，营造和谐的旅游环境</div>
                  <div class={styles['highlights']}>
                    <div class={styles['highlight']}>特定药品</div>
                    <div class={styles['highlight']}>健康咨询</div>
                    <div class={styles['highlight']}>预约挂号</div>
                    <div class={styles['highlight']}>就医绿通</div>
                  </div>
                  <div class={styles['config-info']}>
                    <div class={styles['config-info-item']}>
                      <span>销售区域：</span>
                      <span>全国</span>
                    </div>
                    <div class={styles['config-info-item']}>
                      <span>承保年龄：</span>
                      <span>从业人员：16周岁（含）-65周岁（含）</span>
                    </div>
                    <div class={styles['config-info-item']}>
                      <span>保险期间：</span>
                      <span>6个月 / 9个月 / 12个月</span>
                    </div>
                  </div>
                </div>
                <div class={styles['product-prem']}>
                  <div class={styles.price}>
                    <span>98.00</span>
                    <span>起</span>
                  </div>
                  <div class={styles['detail-btn']} onClick={() => { toDetail(item) }}>查看详情</div>
                </div>
              </div>
            ))
          }
        </div>
        <div class={styles.pagination}>
          <a-pagination v-model:current={productListState.page} total={productListState.total} />
        </div>
      </div>
    )

    return () => (
      <div class={styles.Supermarketlist}>
        <Breadcrumb list={breadcrumbState.value} />
        <Filter />
        <ProductList />
      </div>
    )
  }
})